<html>
    <head>
        <title>CSS过渡(transition)</title>
    </head>
    <body>
        <script>
            // 三、CSS过渡 (transition)
                        /*
                            常用的过渡都是使用CSS过渡。

                            下面是一个简单的例子：

                                    <div id="example-1">
                                        <button v-on:click="show=!show">
                                                显示切换
                                        </button>
                                        <transition name="slide-fade">
                                            <p v-if="show">Hello</p>
                                        </transition>
                                    </div>
                        */
                        new Vue({
                                        el:'#example-1',
                                        data:{
                                            show:true
                                        }
                                    })

                        /*
                            用于过渡的CSS类应该如下命名：  
                            --可以设置不同的进入和离开通动画---

                            --设置持续时间和动画函数---
                            .slide-fade-enter-active {
                                transition: all .3s ease;
                            }

                            .slide-fade-leave-active {
                                transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);  // CSS中使用过渡贝塞尔曲线
                            }

                            .slide-fade-enter, .slide-fade-leave-to{
                                transform: translateX(10px);
                                opacity: 0;
                            }
                        */

        </script>
    </body>
</html>